<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>用户管理</title>
<c:import url="../common/common.jsp"></c:import>
	<!-- Bootstrap core CSS -->
	<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/css/bootstrap.min.css"
		  rel="stylesheet">

	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
	<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/css/ie10-viewport-bug-workaround.css"
		  rel="stylesheet">

	<!-- Custom styles for this template -->
	<link href="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/examples/dashboard/dashboard.css"
		  rel="stylesheet">

	<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
	<!--[if lt IE 9]>
	<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie8-responsive-file-warning.js"></script>
	<![endif]-->
	<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie-emulation-modes-warning.js"></script>

</head>

<body>
<!-- 头部导航 -->
<c:import url="../common/adminNav.jsp"></c:import>

<!--左侧菜单-->
<div class="admin-iframe-content">
	<div id="menu" class="admin-iframe-menu">
		<ul>
			<li class="javaex-menu-item alone hover">
				<a href="#">首页</a>
			</li>
		</ul>
		<ul>
			<li class="javaex-menu-item">
				<a href="#">系统管理<i class="icon-angle-down"></i></a>
				<ul>
					<li><a href="/page/admin/user_info/index.jsp">管理员管理</a></li>
					<li><a href="/page/admin/user_info/user_list.jsp">用户管理</a></li>
					<li><a href="#">角色管理</a></li>
					<li><a href="#">分类管理</a></li>
					<li><a href="#">权限管理</a></li>
					<li><a href="#">日志管理</a></li>
				</ul>
			</li>
			<li class="javaex-menu-item">
				<a href="#">工作管理<i class="icon-angle-down"></i></a>
				<ul>
					<li><a href="/page/admin/user_info/move_list.jsp">视频管理</a></li>
					<li><a href="#">订单管理</a></li>
					<li><a href="#">轮播图管理</a></li>
					<li><a href="#">友情链接管理</a></li>
				</ul>
			</li>
		</ul>
	</div>

	<!--全部主体内容-->
	<div class="list-content">
		<!--块元素-->
		<div class="block">
			<!--页面有多个表格时，可以用于标识表格-->
			<h2>用户列表</h2>
			<!--正文内容-->
			<div class="main">
				<!--表格上方的搜索操作-->
				<div style="text-align:right;margin-bottom:10px;">
					<%--<select id="group_id" class="no-shadow">--%>
					<%--<option value="">全部</option>--%>
					<%--<c:forEach items="${groupList}" var="groupInfo" varStatus="status" >--%>
					<%--<option value="${groupInfo.id}" <c:if test="${groupInfo.id==groupId}">selected</c:if>>${groupInfo.name}</option>--%>
					<%--</c:forEach>--%>
					<%--</select>--%>
					<div class="input-group">
						<!-- 登录名检索 -->
						<input type="text" class="text" id="keyWord" value="${keyWord}" placeholder="检索登录名"/>
						<!-- 点击查询按钮 -->
						<button class="button blue" onclick="search()"><span class="icon-search"></span></button>
					</div>
				</div>

				<!--表格上方的操作元素，添加、删除-->
				<div class="operation-wrap">
					<div class="buttons-wrap">
						<button id="add_product" class="btn btn-primary" data-toggle="modal" data-target="#productModal">添加商品</button>
					</div>
				</div>

				<!--class加上color可以实现隔行变色-->
				<!--color1表示奇数行着色、color2表示偶数行着色-->
				<table id="table" class="table">
					<thead>
					<tr>
						<%--<th class="checkbox"><input type="checkbox" class="fill listen-1" /> </th>--%>
						<th style="width:10%;">id</th>
						<th>头像</th>
						<th>登录名</th>
						<th>电话</th>
						<th>邮箱</th>
						<th>状态</th>
						<th>注册时间</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					<tr>
						<td>1,008</td>
						<td>Fusce</td>
						<td>nec</td>
						<td>tellus</td>
						<td>sed</td>
						<td>sed</td>
						<td>sed</td>
						<td>
							<button class="btn btn-info" data-toggle="modal" data-target="#productModal">修改</button>
							<button class="btn btn-danger">删除</button>
						</td>
					</tr>
					</tbody>
				</table>

				<!-- 分页 -->
				<div class="page">
					<ul id="page" class="pagination"></ul>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- 用户模态框部分 -->
<!-- Modal -->
<div class="modal fade" id="productModal" tabindex="-1" role="dialog" data-toggle="modal" aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">用户添加</h4>
			</div>
			<div class="modal-body">
				<div class="row">
					<div class="col-md-1"></div>
					<div class="col-md-10">
						<form class="form-horizontal">
							<div class="form-group">
								<label for="productName" class="col-sm-3 control-label">用户名称</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="productName" placeholder="用户名称">
								</div>
							</div>
							<div class="form-group">
								<label for="productName" class="col-sm-3 control-label">用户价格</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="productName" placeholder="用户价格">
								</div>
							</div>
							<div class="form-group">
								<label for="productName" class="col-sm-3 control-label">用户分类</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="productName" placeholder="用户分类">
								</div>
							</div>
							<div class="form-group">
								<label for="productName" class="col-sm-3 control-label">用户数量</label>
								<div class="col-sm-9">
									<input type="text" class="form-control" id="productName" placeholder="用户数量">
								</div>
							</div>
							<div class="form-group">
								<label for="productName" class="col-sm-3 control-label">用户图片</label>
								<div class="col-sm-9">
									<input type="file" class="form-control" id="productName" placeholder="请上传用户图片">
								</div>
							</div>
							<div class="form-group">
								<label for="productName" class="col-sm-3 control-label">用户描述</label>
								<div class="col-sm-9">
									<textarea class="form-control" id="productName" placeholder="用户描述"></textarea>
								</div>
							</div>
						</form>
					</div>
					<div class="col-md-1"></div>
				</div>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="button" class="btn btn-primary">保存</button>
			</div>
		</div>
	</div>
</div>

	<!-- Placed at the end of the document so the pages load faster -->
	<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
			integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
			crossorigin="anonymous"></script>
	<script>
        window.jQuery || document.write(
            '<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/jquery.min.js"><\/script>'
        )
	</script>
	<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/dist/js/bootstrap.min.js"></script>
	<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
	<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/vendor/holder.min.js"></script>
	<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
	<script src="https://cdn.jsdelivr.net/npm/@bootcss/v3.bootcss.com@1.0.14/assets/js/ie10-viewport-bug-workaround.js"></script>
	<script src="https://cdn.bootcdn.net/ajax/libs/sweetalert/2.1.2/sweetalert.min.js" type="text/javascript"></script>
<script>
	javaex.loading();

	var currentPage = "${pageInfo.pageNum}";
	var pageCount = "${pageInfo.pages}";

	javaex.select({
		id : "group_id",
		isSearch : false
	});
	
	javaex.select({
		id : "group_id2",
		isSearch : false
	});
	
	javaex.page({
		id : "page",
		pageCount : pageCount,	// 总页数
		currentPage : currentPage,// 默认选中第几页
		// 返回当前选中的页数
		callback:function(rtn) {
			search(rtn.pageNum);
		}
	});
	
	function search(pageNum) {
		if (pageNum==undefined) {
			pageNum = 1;
		}
		
		// 用户组id
		var groupId = $("#group_id").val();
		// 关键字检索
		var keyWord = $("#keyWord").val();
		
		window.location.href = "list_normal.action"
				+ "?pageNum="+pageNum
				+ "&groupId="+groupId
				+ "&keyWord="+keyWord
				;
	}
	
	// obj为当前点击的元素对象
	function img(obj) {
		javaex.dialog({
			type : "image",	// 弹出层类型
			width : "400",	// 弹出层宽度
			url : obj.children[0].src	// 图片地址
		});
	}
	
	// 批量提交按钮点击事件
	$("#save").click(function() {
		var idArr = new Array();
		$(':checkbox[name="id"]:checked').each(function() {
			idArr.push($(this).val());
		});
		
		// 判断至少选择一条记录
		if (idArr.length==0) {
			javaex.optTip({
				content : "至少选择一条记录",
				type : "error"
			});
			return;
		}
		
		// 判断选择的哪一个单选框进行操作
		var opt = $(':radio[name="radio"]:checked').val();
		
		if (opt=="ban") {
			// 批量封禁
			javaex.optTip({
				content : "数据提交中，请稍候...",
				type : "submit"
			});
			
			$.ajax({
				url : "batch_update_status.json",
				type : "POST",
				dataType : "json",
				traditional : "true",
				data : {
					"idArr" : idArr,
					"status" : "2"
				},
				success : function(rtn) {
					if (rtn.code=="000000") {
						javaex.optTip({
							content : rtn.message,
							type : "success"
						});
						
						// 建议延迟加载
						setTimeout(function() {
							// 刷新页面
							window.location.reload();
						}, 2000);
					} else {
						javaex.optTip({
							content : rtn.message,
							type : "error"
						});
					}
				}
			});
		} else if (opt=="change_group") {
			// 批量更换用户组
			// 获取目标用户组的id
			var groupId = $("#group_id2").val();
			
			javaex.optTip({
				content : "数据提交中，请稍候...",
				type : "submit"
			});
			
			$.ajax({
				url : "batch_change_group.json",
				type : "POST",
				dataType : "json",
				traditional : "true",
				data : {
					"idArr" : idArr,
					"groupId" : groupId
				},
				success : function(rtn) {
					if (rtn.code=="000000") {
						javaex.optTip({
							content : rtn.message,
							type : "success"
						});
						
						// 建议延迟加载
						setTimeout(function() {
							// 刷新页面
							window.location.reload();
						}, 2000);
					} else {
						javaex.optTip({
							content : rtn.message,
							type : "error"
						});
					}
				}
			});
		} else {
			javaex.optTip({
				content : "请选择操作选项",
				type : "error"
			});
		}
	});
</script>
</body>
</html>
